<template>
  <div class="treatment-appointment-batch">
    <el-row class="header">
      <el-col :span="16">
        <AElFormRex ref="AElForm" :disabled="loading" :rows="3" labelWidth="10px" :line="2" :data="form"
          @change="change" />
      </el-col>
      <el-col class="el-col-btn" :span="8">
        <el-button type="primary" @click="search">查询</el-button>
        <el-button type="primary" :loading="loading" v-show="isAloneBatch">预约</el-button>
        <el-button type="primary" :loading="loading" v-show="isBatch" @click="batchMake">批量预约</el-button>
        <el-button type="primary" :loading="loading" :disabled="isMake" @click="viewMake">预约记录</el-button>
        <el-button type="primary" :loading="loading" :disabled="!selectData.length">取消预约</el-button>
        <!-- <el-button type="primary" :loading="loading">操舱医嘱</el-button>
        <el-button type="primary" :loading="loading">知情同意书</el-button>
        <el-button type="primary" :loading="loading">提取计划</el-button> -->
      </el-col>
    </el-row>
    <el-row class="main" :gutter="20">
      <el-col :span="8">
        <!-- <DoctorManoeuvres /> -->
        <TableLeft v-loading="loading" ref="TableLeftTreatment" :form="initData" :setLoading="setLoading"
          :patientTypeList="patientTypeList" @tableChange="tableChange" />
      </el-col>
      <el-col :span="16">
        <ContentRight ref="ContentRightTreatment" :form="initData" :setLoading="setLoading" />
      </el-col>
    </el-row>
    <el-dialog title="康复治疗排班表" center :visible.sync="visible" width="90%">
      <WorkingSchedule />
    </el-dialog>
  </div>
</template>

<script>
import { getDepartList } from '@/api/system/user.js';
import WorkingSchedule from '@/views/treatmentAppointmentBatch/workingSchedule'; // 排班表
import TableLeft from './tableLeft'; // 左侧表格
import ContentRight from './contentRight'; // 右侧内容
import DoctorManoeuvres from './doctorManoeuvres'; // 操舱医嘱
export default {
  name: "TreatmentAppointmentBatch",
  components: { TableLeft, ContentRight, DoctorManoeuvres, WorkingSchedule },
  data() {
    return {
      visible: false, // 是否显示排班提示框
      initData: {}, // 初始化数据
      form: {}, // 表单
      exeStatesList: [], // 执行状态列表
      patientTypeList: [], // 就诊类型列表
      hyperbaricOxygenStatesList: [], // 是否压氧治疗列表
      departList: [], // 执行科室列表
      selectData: [], // 左侧表单选择的病人
      loading: true, // 是否在查询
    }
  },
  created() {
    this.initList();
    this.setFormConfig();
    this.getFormData();
  },
  computed: {
    /**
     * 是否批量选择
     */
    isBatch() {
      return this.selectData.length > 1
    },
    /**
     * 是否可以预约
     */
    isAloneBatch() {
      return this.selectData.length === 1
    },
    /**
     * 是否可以预约
     */
    isMake() {
      let [data] = this.selectData;
      return !((this.selectData.length === 1) && !data.newFlag);
    }
  },
  methods: {
    /**
     * 修改visible
     */
    editVisible(value = false) {
      this.visible = value;
    },
    /**
     * 表单数据变化时
     */
    change({ myStates = 0, ...rest }) {
      this.initData = { myStates: Number(myStates), ...rest };
    },
    /**
     * 判断表格选中数据是否达到批量条件
     */
    tableChange(data) {
      this.selectData = data;
    },
    /**
     * 初始化各列表
     */
    initList() {
      this.exeStatesList = [{ label: "执行中", value: "1" }, { label: "已完成", value: "2" }];
      this.hyperbaricOxygenStatesList = [{ label: "非高压氧治疗", value: "0" }, { label: "高压氧治疗", value: "1" }];
      this.patientTypeList = [{ label: "门诊", value: "1" }, { label: "住院", value: "2" }, { label: "其他", value: "3" }]
    },
    /**
     * 设置表单配置
     */
    setFormConfig() {
      this.form = {
        date: {
          label: "申请时间",
          labelWidth: "80px",
          clearable: true,
          valueFormat: "yyyy-MM-dd",
          type: "datetimerange"
        },
        departmentCode: {
          placeholder: "执行科室",
          type: "select",
          clearable: true,
          children: this.departList
        },
        exeStates: {
          placeholder: "执行状态",
          type: "select",
          clearable: true,
          children: this.exeStatesList
        },
        patientType: {
          placeholder: "就诊类型",
          type: "select",
          clearable: true,
          rows: 4,
          children: this.patientTypeList
        },
        hyperbaricOxygenStates: {
          placeholder: "是否压氧治疗",
          type: "select",
          clearable: true,
          rows: 4,
          children: this.hyperbaricOxygenStatesList
        },
        patientName: {
          placeholder: "姓名/床号/住院号/门诊号",
          clearable: true,
          rows: 4,
        },
        myStates: {
          label: "个人",
          labelWidth: "50px",
          rows: 4,
          render: (callback = () => null, key = null, form = {}) => {
            const change = data => callback(data, key);
            return <el-checkbox value={form.myStates} onChange={change}>{null}</el-checkbox>
          }
        }
      }
    },
    /**
     * 获取表单数据
     */
    getFormData() {
      getDepartList({ page: 1, size: 99999 }).then(({ content = [] }) => {
        this.departList = content.map(({ hisDepartmentId: value = null, departmentName: label = null, ...rest }) => ({ value, label, ...rest }));
        this.setFormConfig();
      });
    },
    /**
     * 修改loading效果
     */
    setLoading(val = true) {
      this.loading = val;
    },
    /**
     * 查看预约记录
     */
    viewMake() {
      let { selectData = [] } = this;
      if (selectData.length > 1) {
        this.$confirm('预约记录只能选择一个病人', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      } else if (!selectData.length) {
        this.$confirm('请选择一个病人', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      } else {
        let [data] = selectData;

        /**
         * 使用的是项目字段reservationStates
         */
        if (data.newFlag) {
          this.$notify({
            title: '预约提示',
            type: "warning",
            message: "该项目暂无预约记录"
          });
        } else {
          this.$router.push({
            name: "AppRecord",
            query: {
              info: JSON.stringify(data),
            },
          });
        }
      }
    },
    /**
     * 查询数据
     */
    search() {
      this.$refs.TableLeftTreatment.getData()
    },
    /**
     * 批量预约
     */
    batchMake() {
      this.editVisible(true);
    }
  }
}
</script>

<style lang="scss" scoped>
@import url('index.scss');
</style>